<template>
  <view>
    <!-- 轮播图部分 -->
    <swiper indicator-dots autoplay="true" interval="3000" duration="500" circular>
      <swiper-item v-for="(item, index) in swiperImages" :key="index">
        <image :src="item" mode="aspectFill" class="swiper-image" />
      </swiper-item>
    </swiper>

    <!-- 银行列表 -->
    <view>
      <h2>银行列表</h2>
      <view v-for="(bank, index) in banks" :key="bank.bank_id" class="bank-item">
        <!-- 左边的银行图片 -->
        <image :src="bank.bank_image_url" mode="aspectFill" class="bank-image" />
      
        <!-- 右边的银行信息 -->
        <view class="bank-info">
          <text class="bank-name">{{ bank.bank_name }}</text>
          <text class="bank-code">{{ bank.bank_code }}</text>
          <text class="bank-status">{{ bank.status === '1' ? '正常' : '停用' }}</text>
          <text class="bank-address">{{ bank.address }}</text>
        </view>
      </view>
    </view>
  
    <!-- 五个模块部分 -->
    <view class="modules">
      <view v-for="(module, index) in modules" :key="index" class="module" @click="goToLoan">
        <image :src="module.image" class="module-image" />
        <view class="module-info">
          <text class="module-description">{{ module.description }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getBankList} from '../../api/bank/bank.js';

export default {
  data() {
    return {
      banks: [],  // 用于存储银行数据
      swiperImages: [
        '/static/fss-image/China1.jpg',  // 第一张图片
        '/static/fss-image/China3.jpg',  // 第二张图片
        '/static/fss-image/China5.jpg',  // 第三张图片
		'/static/fss-image/China7.jpg',
		'/static/fss-image/China9.jpg',
      ], // 存储轮播图的图片地址
      modules: [
        { 
          description: '选择中国银行,实现心中理想。',
          image: '/static/fss-image/China.jpg'  // 模块 1 的图片路径
        },
        { 
          description: '客户至上 注重细节.',
          image: '/static/fss-image/China2.jpg'  // 模块 2 的图片路径
        },
        { 
          description: '工以至诚，与奋进者一同前行。',
          image: '/static/fss-image/China4.jpg'  // 模块 3 的图片路径
        },
        {
          description: '为未来而存，为梦想而动。',
          image: '/static/fss-image/China6.png'  // 新模块 4 的图片路径
        },
        {
          description: '金融创新，成就非凡。',
          image: '/static/fss-image/China8.jpg'  // 新模块 5 的图片路径
        }
      ],
    };
  },
  created() {
    this.fetchBanks();  // 组件创建时获取银行数据
  },
  methods: {
    // 获取银行列表的方法
    async fetchBanks() {
      try {
        const response = await getBankList();  // 获取银行列表数据
        this.banks = response.data;  // 将返回的数据赋值给 banks
      } catch (error) {
        console.error('Error fetching banks:', error);
      }
    },
    
    // 点击模块跳转到 loan 页面
    goToLoan() {
      // 如果是小程序环境，使用 uni.navigateTo
      if (uni) {
        uni.navigateTo({
          url: '/pages/financing/loan'  // 路径根据你的项目结构调整
        });
      }
    }
  },
};
</script>

<style scoped lang="scss">
.swiper-image {
  width: 100vw;
  height: 300rpx;  // 设置轮播图图片的高度
}

.bank-item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  color: #333;
  align-items: center;
}

h2 {
  font-size: 20px;
  margin: 10px 0;
}

.bank-image {
  width: 150rpx;  // 银行图片宽度
  height: 150rpx;  // 银行图片高度
  margin-right: 10px;
  border-radius: 8px;  // 圆角效果
}

.bank-info {
  display: flex;
  flex-direction: column;
}

.bank-name {
  font-weight: bold;
}

.modules {
  margin-top: 20px;
}

.module {
  display: flex;
  padding: 15rpx;
  border-bottom: 1px solid #ddd;
  align-items: center;
}

.module-image {
  width: 150rpx;  // 每个模块的图片宽度
  height: 150rpx;  // 每个模块的图片高度
  margin-right: 15rpx;
}

.module-info {
  flex: 1;
}

.module-title {
  font-size: 18px;
  font-weight: bold;
}

.module-description {
  font-size: 14px;
  color: #666;
}
</style>
